<template>
  <dv-border-box-7 id="first-content">
    <div class="content-tittle">设备布局</div>
    <div class="OP10DotPosition">
      <!-- 从左往右 -->
      <div :style="`backgroundColor:${color}`" class="status"></div>
      <div :style="`backgroundColor:${color1}`" class="status"></div>
      <div :style="`backgroundColor:${color2}`" class="status"></div>
      <div :style="`backgroundColor:${color3}`" class="status"></div>
    </div>
    <div class="OP20DotPosition">
      <div :style="`backgroundColor:${color4}`" class="status1"></div>
      <div :style="`backgroundColor:${color5}`" class="status1"></div>
      <div :style="`backgroundColor:${color6}`" class="status1"></div>
      <div :style="`backgroundColor:${color7}`" class="status1"></div>
      <div :style="`backgroundColor:${color8}`" class="status1"></div>
    </div>

    <div class="OP20DotPosition1">
      <div :style="`backgroundColor:${color9}`" class="status1"></div>
      <div :style="`backgroundColor:${color10}`" class="status1"></div>
      <div :style="`backgroundColor:${color11}`" class="status1"></div>
      <div :style="`backgroundColor:${color12}`" class="status1"></div>
      <div :style="`backgroundColor:${color13}`" class="status1"></div>
    </div>
    <div class="OP30DotPosition">
      <div :style="`backgroundColor:${color14}`" class="status"></div>
      <div :style="`backgroundColor:${color15}`" class="status"></div>
      <div :style="`backgroundColor:${color16}`" class="status"></div>
      <div :style="`backgroundColor:${color17}`" class="status"></div>
      <div :style="`backgroundColor:${color18}`" class="status"></div>
      <div :style="`backgroundColor:${color19}`" class="status"></div>
      <div :style="`backgroundColor:${color20}`" class="status"></div>
      <div :style="`backgroundColor:${color21}`" class="status"></div>
      <div :style="`backgroundColor:${color22}`" class="status"></div>
      <div :style="`backgroundColor:${color23}`" class="status"></div>
    </div>
    <div class="OP10XY">OP10</div>
    <div class="OP20XY">OP20</div>
    <div class="OP30XY">OP30</div>
  </dv-border-box-7>
</template>

<script>
import * as echarts from "echarts";
import Axios from "axios";
export default {
  name: "firstContent",
  data() {
    return {
      color: "red",
      color1: "red",
      color2: "red",
      color3: "red",
      color4: "red",
      color5: "red",
      color6: "red",
      color7: "red",
      color8: "red",
      color9: "red",
      color10: "red",
      color11: "red",
      color12: "red",
      color13: "red",
      color14: "red",
      color15: "red",
      color16: "red",
      color17: "red",
      color18: "red",
      color19: "red",
      color20: "red",
      color21: "red",
      color22: "red",
      color23: "red",
    };
  },
  methods: {
    UpdateData() {
      const { randomExtend } = this;
      var url = this.$baseUrl + "equipment/equipment-status";
      Axios.get(url).then((response) => {
        let status = response.data.Value;
        for (var i = 0; i < status.length; i++) {
          switch (i) {
            case 0:
              this.color = status[i] == "2" ? "green" : "red";
              break;
            case 1:
              this.color1 = status[i] == "2" ? "green" : "red";
              break;
            case 2:
              this.color2 = status[i] == "2" ? "green" : "red";
              break;
            case 3:
              this.color3 = status[i] == "2" ? "green" : "red";
              break;
            case 4:
              this.color4 = status[i] == "2" ? "green" : "red";
              break;
            case 5:
              this.color5 = status[i] == "2" ? "green" : "red";
              break;
            case 6:
              this.color6 = status[i] == "2" ? "green" : "red";
              break;
            case 7:
              this.color7 = status[i] == "2" ? "green" : "red";
              break;
            case 8:
              this.color8 = status[i] == "2" ? "green" : "red";
              break;
            case 9:
              this.color9 = status[i] == "2" ? "green" : "red";
              break;
            case 10:
              this.color10 = status[i] == "2" ? "green" : "red";
              break;
            case 11:
              this.color11 = status[i] == "2" ? "green" : "red";
              break;
            case 12:
              this.color12 = status[i] == "2" ? "green" : "red";
              break;
            case 13:
              this.color13 = status[i] == "2" ? "green" : "red";
              break;
            case 14:
              this.color14 = status[i] == "2" ? "green" : "red";
              break;
            case 15:
              this.color15 = status[i] == "2" ? "green" : "red";
              break;
            case 16:
              this.color16 = status[i] == "2" ? "green" : "red";
              break;
            case 17:
              this.color17 = status[i] == "2" ? "green" : "red";
              break;
            case 18:
              this.color18 = status[i] == "2" ? "green" : "red";
              break;
            case 19:
              this.color19 = status[i] == "2" ? "green" : "red";
              break;
            case 20:
              this.color20 = status[i] == "2" ? "green" : "red";
              break;
            case 21:
              this.color21 = status[i] == "2" ? "green" : "red";
              break;
            case 22:
              this.color22 = status[i] == "2" ? "green" : "red";
              break;
          }
        }
      });
    },
  },
  created() {
    const { UpdateData } = this;

    UpdateData();

    setInterval(this.UpdateData, 1000);
  },
};
</script>

<style lang="less">
#first-content {
  width: 80%;
  height: 100%;
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
  background-image: url("../img/DeviceTrans.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;

  .content-tittle {
    font-size: 20px;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
  }
  .OP10XY {
    padding-top: 20%;
    padding-left: 75%;
    font-size: 30px;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
  }
  .OP20XY {
    padding-top: 3%;
    padding-left: 35%;
    font-size: 30px;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
  }
  .OP30XY {
    padding-top: 5%;
    padding-left: 75%;
    font-size: 30px;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
  }
  .OP10DotPosition {
    position: absolute;
    padding-top: 15%;
    padding-left: 60%;
  }
  .OP20DotPosition {
    position: absolute;
    padding-top: 15%;
    padding-left: 4%;
  }
  .OP20DotPosition1 {
    position: absolute;
    padding-top: 5%;
    padding-left: 4%;
  }
  .OP30DotPosition {
    position: absolute;
    padding-top: 40%;
    padding-left: 30%;
  }
  .status {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    float: right;
    margin-left: 6rem;
  }
  .status1 {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    float: right;
    margin-left: 10rem;
  }
}
</style>
